<template>
  <div class="container">
    <!--查询条件-->
    <div class="search-box" ref="queryForm">
      <el-form :inline="true" :model="search" class="demo-form-inline">
        <el-form-item label="片区">
          <treeselect v-model="search.deptId" style="width:200px;line-height:34px" size="medium" :options="zoneList" :show-count="true" placeholder="请选择片区" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" @click="getTableList">查询</el-button>
          <el-button type="default" size="small" @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!--查询条件-->

    <!--操作-->
    <div class="operate-box" style="margin: 15px 0;" ref="add">
      <el-button type="primary" size="small" plain icon="el-icon-plus" @click="handleAdd" v-hasPermi="['leaderConfig:add']">新增</el-button>
    </div>
    <!--操作-->

    <!--表格-->
    <el-table ref="elTable" :data="list" border size="mini" stripe :height="listHeight || fillHeight('listHeight',['queryForm','add','pagination'],['hamburger-container','tags-view-container'], 100)" @selection-change="handleSelectionChange">
      <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
      <el-table-column prop="deptName" label="片区"></el-table-column>
      <el-table-column prop="designLeaderName" label="二次设计组长" show-overflow-tooltip></el-table-column>
      <el-table-column prop="budgetLeaderName" label="片区预结算组长"></el-table-column>
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button @click.native.prevent="handleEdit(scope.row)" type="text" size="small" v-hasPermi="['leaderConfig:edit']">编辑</el-button>
          <el-button @click.native.prevent="handleDelete(scope.row.deptId)" type="text" size="small" v-hasPermi="['leaderConfig:delete']">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--表格-->

    <!--新增&&编辑窗口-->
    <el-dialog :title="type==='add'?'新增':'编辑'" :visible.sync="dialogFormVisible" width="30%">
      <el-form :model="form" label-width="120px">
        <el-form-item label="片区">
          <treeselect v-model="form.deptId" size="small" :options="zoneList" :disabled="type==='edit'" :show-count="true" placeholder="请选择片区" @select="handleAreaChange"/>
        </el-form-item>
        <el-form-item label="二次设计组长">
          <zb-form-select-data v-bind="dutyOptions" v-model="form.designLeaderName" @dataChange="handleDesignLeaderChange"></zb-form-select-data>
        </el-form-item>
        <el-form-item label="片区预结算组长">
          <zb-form-select-data v-bind="dutyOptions" v-model="form.budgetLeaderName" @dataChange="handleBudgetLeaderChange"></zb-form-select-data>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleConfirmClick">确 定</el-button>
      </div>
    </el-dialog>
    <!--新增&&编辑窗口-->

  </div>
</template>

<script>
  import {getTableListApi, deleteApi, addAndUpdateApi} from "@/api/system/userDistribute";
  import { getTreeselect} from "@/api/pigFarm/pigFarmInfo";
  import { restObject } from '../../../utils/index'
  import BaseIndex from "@/views/base/BaseIndex";
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  import {getToken} from "@/utils/auth";
  export default {
    name: "UserDistribute",
    extends: BaseIndex,
    components:{ Treeselect },
    data() {
      return {
        search: { deptId:null },//查询条件
        listHeight:0,
        zoneList:[],//片区数据
        list: [],//表格
        type:"add",//新增&&编辑
        dialogFormVisible:false,//新增&&编辑窗口
        //系统用户配置
        dutyOptions: {
          label: "责任人",
          prop: "nameCn",
          type: "selectData",
          searchKey: "nameCn",
          span: 12,
          url: `${process.env.VUE_APP_BASE_API}/common/list`,
          props: {
            label: "nameCn",
            value: "account"
          },
          height: 62,
          createdRequest: false,
          searchIconVisible: true,
          filterAble: false,
          getDictSuccessStatus: 0,
          getDictResultMap: {
            status: 'data.code',
            data: 'data.data',
            list: 'data.data.records',
            total: 'data.data.total',
          },
          method: 'post',
          dialogType: 2,
          labelFields: ['nameCn', 'account', 'deptName'],
          labelFieldsName: ['用户名', '账户', '所属部门'],
          searchLabel: ['nameCn'],
          searchLabelName: ['用户名'],
          headers: {
            Authorization: 'Bearer ' + getToken()
          },
        },
        //窗口表单
        form:{
          deptId:null,
          designLeader:"",
          designLeaderName:"",
          budgetLeader:"",
          budgetLeaderName:"",
        }
      }
    },

    created(){
      this.getAreaData();
      this.getTableList();
    },

    methods:{

      /**
       * 获取片区数据
       */
      getAreaData(){
        getTreeselect().then(res => {
            if(res && res.code ===0){
              this.zoneList = res.data
            }else{
              this.msgError(res.msg)
            }
            this.loading = false;
          }
        );
      },

      /**
       * 获取表格数据
       */
      getTableList(){
        const loading = this.$loading({lock: true, text: 'Loading', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)'});
        getTableListApi(this.search.deptId).then(res => {
          console.log('列表:',res);
          loading.close();
          if(res.code === 0){
            this.list = res.data;
          }else{
            this.$message.warning(res.msg);
          }
        }).catch(error => {
          console.log('error:',error);
          loading.close();
        })
      },


      /**
       *重置
       */
      handleReset(){
        this.search.deptId = null;
        this.getTableList();
      },

      /**
       * 片区选择事件
       */
      handleAreaChange(e) {
        const { id, label } = e;
        this.form.deptId = id;
        this.form.deptName =label;
      },

      /**
       *新增
       */
      handleAdd(){
        this.type = "add";
        this.deptId = null;
        this.designLeader = "";
        this.designLeaderName = "";
        this.budgetLeader = "";
        this.budgetLeaderName = "";
        this.dialogFormVisible = true;
      },

      /**
       *编辑&&查看
       * @param data
       */
      handleEdit(data){
        this.type = "edit";
        const { deptId, designLeader, designLeaderName, budgetLeader, budgetLeaderName } = data
        this.form.deptId = deptId;
        this.form.designLeader = designLeader;
        this.form.designLeaderName = designLeaderName;
        this.form.budgetLeader = budgetLeader;
        this.form.budgetLeaderName = budgetLeaderName;
        this.dialogFormVisible = true;
      },




      /**
       *删除点击事件
       */
      handleDelete(deptId){
        this.$confirm('确定要删除吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const loading = this.$loading({lock: true, text: 'Loading', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)'});
          deleteApi(deptId).then(res => {
            console.log('删除:',res);
            loading.close();
            if(res.code === 0){
              this.$message.success('删除成功');
              this.getTableList();
            }else{
              this.$message.warning(res.msg);
            }
          }).catch(error => {
            loading.close();
            console.log('error:',error);
          })
        })
      },


      /**
       *pageSize切换事件
       * @param val
       */
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.page.pageSize = val;
        this.getTableList();
      },

      /**
       *分页切换
       * @param val
       */
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.page.pageNum = val;
        this.getTableList();
      },

      //==========================新增&&编辑 窗口================================================

      /**
       *二次设计组长选择事件
       * @param val
       */
      handleDesignLeaderChange(val){
        console.log(val);
        const { account, nameCn } = val;
        debugger
        this.form.designLeader = account;
        this.form.designLeaderName = nameCn;
      },

      /**
       *片区预结算组长选择事件
       * @param val
       */
      handleBudgetLeaderChange(val){
        console.log(val);
        const { account, nameCn } = val;
        this.form.budgetLeader = account;
        this.form.budgetLeaderName = nameCn;
      },

      /**
       * 确定
       */
      handleConfirmClick(){
        const { deptId, designLeader, budgetLeader } = this.form;
        debugger
        if(!deptId){
          this.$message.warning("请选择片区!");
        }else if(!designLeader){
          this.$message.warning("请选择二次设计组长!");
        }else if(!budgetLeader){
          this.$message.warning("请选择片区预结算组长!");
        }else{
          const loading = this.$loading({lock: true, text: 'Loading', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)'});
          addAndUpdateApi(this.type,this.form).then(res => {
            console.log("res:",res);
            loading.close();
            if(res.code===0){
              this.$message.success("操作成功");
              this.dialogFormVisible = false;
              this.getTableList();
            }else{
              this.$message.error(res.msg);
            }
          }).catch(error => {
            console.log('error:',error);
            loading.close();
          })
        }
      }


    }
  }
</script>

<style scoped lang="scss">
  .container{
    position: relative;
    padding: 20px;
    box-sizing: border-box;
    background-color: white;
    .page-box{
      width: 100%;
      height: 60px;
      // display: flex;
      // justify-content: center;
      align-items: center;
      text-align: right;
      margin: 20px 0 0;
    }
  }
</style>
